<template>
  <div class="container">
    <div class="header">
      <div class="logo_img">
        <img src="../assets/home.jpg" alt="" />
      </div>
      <div class="tabBar">
        <div
          class="tabBarItem"
          :class="activeTab == index ? 'active' : ''"
          v-for="(item, index) in tabList"
          :key="index"
          @click="scrollTo(index)"
        >
          <div class="name" :class="activeTab == index ? 'active' : ''">
            {{ item.name }}
          </div>
          <div class="english" :class="activeTab == index ? 'active' : ''">
            {{ item.english }}
          </div>
        </div>
      </div>
    </div>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      tabList: [
        { name: "首页", english: "HOME" },
        { name: "院方概况", english: "OVERVIEW" },
        { name: "专家介绍", english: "EXPERT" },
        { name: "协同网点", english: "PARTNER" },
        { name: "研发成果", english: "RESEARCH" },
        { name: "学术论文", english: "PAPER" },
      ],
      activeTab: 0,
    }
  },
  methods: {
    scrollTo(index) {
      this.activeTab = index
      // console.log(index);
      this.$router.push({
        name: "IndexContent",
        params: {
          activeTab: index,
        },
      })
    },
  },
  created() {},
  mounted() {
    // this.activeTab = this.$route.query.activeTab || 0;
  },
}
</script>

<style lang="stylus" scoped>
.container
  display flex
  flex-direction column
  justify-content center
  position relative
  .header
    // position fixed
    top 0
    background #fff
    z-index 8
    display flex
    height 124px
    width 100%
    align-items center
    justify-content space-around
    .logo_img
      width 300px
      img
        width 100%
    .tabBar
      display flex
      align-items center
      // height 124px
      .tabBarItem
        text-decoration none
        display flex
        height 124px
        min-width 90px
        align-items center
        flex-direction column
        justify-content center
        padding 0px 10px
        cursor pointer
        .name
          margin-bottom 10px
          color #1d1d1d
        .english
          color #9f9f9f
      .tabBarItem:hover
        background #3fb6e0
        .name
          color #fff
        .english
          color #fff
      .active.tabBarItem
         background #3fb6e0
      .name.active
          color #fff
      .english.active
          color #fff
</style>
